/// CSS Animation设置
/// @access public
/// @param {map} $options
/// @param {string} $name [unique-id()] - 随机生成的animation-name
/// @param {number} $duration [1] - animation-duration
/// @param {number} $waitTime [0] - animation-delay
/// @param {string} $timingFunction [linear] - animation-timing-function
/// @param {string | number} $iterationCount [infinite] - animation-iteration-count
/// @example
/// 
/// //SCSS
/// .anime {
///    @include animation(
///        (
///            animationName: zoom,
///            keyframes: (
///                0: (
///                    transform: scale(1),
///                    background-color: blue
///                ),
///                100: (
///                    transform: scale(3),
///                    background-color: red
///                )
///            ),
///            duration: 2,
///            waitTime: 1,
///            timingFunction: ease,
///            iterationCount: infinite
///      )
///    );
/// }
/// 
/// //CSS
///     .anime {
///         animation: zoom 2s ease 1s infinite;
///     }
///     @keyframes zoom {
///         0% {
///             transform: scale(1);
///             background-color: blue;
///         }
///         66.66666667% {
///             transform: scale(3);
///             background-color: red;
///         }
///         100% {
///             transform: scale(3);
///             background-color: red;
///         }
///     }
/// 
/// @link http://www.w3cplus.com/preprocessor/sass-animation-keyframes.html
/// @author 大漠

@mixin animation($options: ()) {
    $options: map-merge(( 
    	animationName: unique-id(), 
    	duration: 1, 
    	waitTime: 0, 
    	timingFunction: linear, 
    	iterationCount: infinite
    ), $options);
    $name: map-get($options, animationName);
    $kf: map-get($options, keyframes);
    $kfLength: length($kf);
    $duration: map-get($options, duration);
    $waitTime: map-get($options, waitTime);
    $timingFunction: map-get($options, timingFunction);
    $iterationCount: map-get($options, iterationCount);
    $counter: 1; // index of 'each'
    @keyframes #{$name} {
        @each $frame,
        $prop in $kf {
            #{$frame * $duration / ($duration + $waitTime)}% {
                @each $k,
                $v in $prop {
                    #{$k}: #{$v}
                }
            }
            // if last in loop and waitTime is not 0, add the last frame as 100% (this is what creates the pause)
            @if $counter==$kfLength and $waitTime > 0 {
                100% {
                    @each $k,
                    $v in $prop {
                        #{$k}: #{$v}
                    }
                }
            }
            $counter: $counter+1;
        }
    }
    animation: #{$name} #{$duration}s #{$timingFunction} #{$waitTime}s #{$iterationCount};
}


